<template>
  <div>
    <!--面包屑导航-->
    <el-breadcrumb separator="/" style="padding-left: 10px;padding-bottom: 10px;font-size: 12px">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">业务管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>物资管理</el-breadcrumb-item>
    </el-breadcrumb>

    <el-tabs type="border-card" @tab-click="getConsumer">
      <!--申请列表-->
      <el-tab-pane name="0" label="申请列表">
        <el-card class="box-card">
          <el-form :inline="true" :model="applyForInline" class="demo-form-inline">
            <el-form-item label="申请状态:" style="float: left;">
              <el-radio-group v-model="applyForInline.status" @change="statusChange">
                <el-radio label="">所有</el-radio>
                <el-radio label="审批中">审批中</el-radio>
                <el-radio label="未通过">未通过</el-radio>
                <el-radio label="已通过">已通过</el-radio>
              </el-radio-group>
            </el-form-item>
            <div class="block" style="float: left;">
              <span class="demonstration">申请时间:&nbsp;&nbsp;</span>
              <el-date-picker
                @change="timeChange"
                style="width:280px;"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                v-model="applyForInline.myTime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </div>
            <el-form-item style="margin-left: 8px;">
              <el-button icon="el-icon-refresh">重置</el-button>
              <el-button type="primary" icon="el-icon-search" @click="queryAllApplyForByCondition">查询</el-button>
              <el-button type="warning" icon="el-icon-download">导出</el-button>
              <el-button type="danger" icon="el-icon-upload">导入</el-button>
            </el-form-item>
          </el-form>

          <!--表格内容显示区域-->
          <el-table :data="applyForList" border max-height="400px" style="width: 100%;height: 400px;">
            <el-table-column prop="applyId" label="申请单号" width="120"></el-table-column>
            <el-table-column prop="username" label="申请人" width="120"></el-table-column>
            <el-table-column prop="priority" label="紧急状态" width="80">
              <template slot-scope="scope">
                {{scope.row.priority == 1 ? '不急':(scope.row.priority == 2 ? '常规':(scope.row.priority == 3 ? '紧急' :
                '特急'))}}
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="申请时间" width="120" :formatter="dateFormat"></el-table-column>
            <el-table-column prop="contact" label="需求方" width="120"></el-table-column>
            <el-table-column prop="applyDesc" label="订单描述" width="250"></el-table-column>
            <el-table-column prop="status" label="申请状态" width="180"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="primary" size="mini" icon="el-icon-edit" @click="selectById(scope.row.applyId)">查看
                </el-button>
                <el-button type="danger" size="mini" icon="el-icon-delete" @click="delApplyFor(scope.row.applyId)">取消
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            style="padding-top: 15px"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="applyForInline.current"
            :page-sizes="[2, 4, 6, 8]"
            :page-size="applyForInline.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="applyForInline.total">
          </el-pagination>
        </el-card>
      </el-tab-pane>

      <!--新建申请-->
      <el-tab-pane name="1" label="新建申请">

        <!--1. 基本信息-->
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>基本信息</span>
          </div>
          <div>
            <table>
              <tr>
                <td><span>申请人</span></td>
                <td>
                  <el-input :disabled="true" placeholder="测试" v-model="applyForForm.uid"
                            style="padding: 3px;"></el-input>
                </td>
                <td><span>需求方</span></td>
                <td>
                  <el-select v-model="applyForForm.cid" placeholder="请选择">
                    <el-option
                      v-for="item in consumerList"
                      :key="item.id"
                      :label="item.contact"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </td>
              </tr>
              <tr>
                <td><span>申请说明</span></td>
                <td>
                  <el-input type="textarea" :rows="5" v-model="applyForForm.applyDesc"></el-input>
                </td>
                <td><span>紧急程度</span></td>
                <td>
                  <el-radio-group v-model="applyForForm.priority" @change="statusChange">
                    <el-radio label="1">不急</el-radio>
                    <el-radio label="2">常规</el-radio>
                    <el-radio label="3">紧急</el-radio>
                    <el-radio label="4">特急</el-radio>
                  </el-radio-group>
                </td>
              </tr>
            </table>
          </div>
        </el-card>

        <!--2. 领用明细-->
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>领用明细</span>
          </div>
          <!--表格内容显示区域-->
          <el-form style="width:1300px;">
            <el-row>
              <el-col :span="4"><span class="title">物资编号</span></el-col>
              <el-col :span="4"><span class="title">物资名称</span></el-col>
              <el-col :span="4"><span class="title">计量单位</span></el-col>
              <el-col :span="4"><span class="title">规格</span></el-col>
              <el-col :span="4"><span class="title">数量</span></el-col>
              <el-col :span="4"><span class="title">操作</span></el-col>
            </el-row>
            <el-form-item v-for="item in dataonLineListSelections" :model="dataonLineListSelections">
              <el-row>
                <el-col :span="4"><span>{{item.id}}</span></el-col>
                <el-col :span="4"><span>{{item.name}}</span></el-col>
                <el-col :span="4"><span>{{item.model}}</span></el-col>
                <el-col :span="4"><span>{{item.unit}}</span></el-col>
                <el-col :span="4"><span><el-input v-model="item.applyNum" style="width:100px;"></el-input></span>
                </el-col>
                <el-col :span="4">
                  <el-button type="danger" size="mini" icon="el-icon-delete" @click="movingProduct(scope.row.pid)">移除
                  </el-button>
                </el-col>
              </el-row>
            </el-form-item>
          </el-form>
        </el-card>

        <!--3. 提交申请按钮-->
        <div><el-button type="danger" @click="selectProduct">选择物品</el-button>
          <el-button type="primary" @click="addApplyFor">提交申请</el-button>
        </div>

        <!--3.(1)  选择物品按钮的内容-->
        <el-dialog width="80%" :visible.sync="dialogVisible">
          <el-form>
            <el-input v-model="product.name" placeholder="请输入产品名称" style="width:200px;"
                      @change="nameChange"></el-input>
            <el-button type="danger" @click="getSelectProduct">提交选中</el-button>
            <el-table :data="productList"
                      border max-height="400px"
                      style="width: 100%;"
                      @selection-change="selectionLineChangeHandle">
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column prop="pid" label="物资编号"></el-table-column>
              <el-table-column prop="name" label="物资名称"></el-table-column>
              <el-table-column prop="model" label="计量单位"></el-table-column>
              <el-table-column prop="unit" label="规格"></el-table-column>
            </el-table>
          </el-form>

          <el-pagination
            style="padding-top: 15px"
            @size-change="handleSizeChange2"
            @current-change="handleCurrentChange2"
            :current-page="product.current"
            :page-sizes="[2, 4, 6, 8]"
            :page-size="product.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="product.total">
          </el-pagination>
        </el-dialog>

      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import * as applyFor from "../../api/applyFor";
  import {queryAllProductByCondition} from '../../api/product'
  import {queryConsumerCount} from '../../api/consumer'
  import moment from 'moment'

  export default {
    name: 'ApplyFor',
    data() {
      return {
        dataonLineListSelections: [],//物资弹框中的table中的复选框
        dialogVisible: false,
        applyForInline: {
          pageSize: 2,
          total: 1,
          current: 1,
          name: '',
          myTime: '',
          status: '',
        },
        consumerList: [],
        applyForList: [],/*申请列表  表格显示*/

        /************************新建申请*****************************************/
        /*新建申请  “选择物品”  弹框显示  分页*/
        product: {
          pageSize: 2,
          total: 1,
          current: 1,
          name: '',
        },
        productList: [],/*新建申请  “选择物品”  弹框显示  所有商品信息*/
        selectedProductList: [],/*新建申请  已选商品*/
        /*新建申请  添加   表单的信息*/
        applyForForm: {
          uid: '1',
          priority: '1',
          status: '未审核',
          applyDesc: '',
          productList:[],
        },
        cid: '1',
      }
    },
    methods: {
      // 当记录数发生改变时
      handleSizeChange(val) {
        this.applyForInline.pageSize = val;
        this.getApplyForList();
      },

      // 当前页发生改变时
      handleCurrentChange(val) {
        this.applyForInline.current = val;
        this.getApplyForList();
      },

      // 获取申请列表数据
      async getApplyForList() {
        let current = this.applyForInline.current;
        let pageSize = this.applyForInline.pageSize;
        let status = this.applyForInline.status;
        let firstTime = "";
        let lastTime = "";

        if (this.applyForInline.myTime != null) {
          firstTime = this.applyForInline.myTime[0];
          lastTime = this.applyForInline.myTime[1];
        }

        const {data} = await applyFor.queryAllApplyForByCondition(current, pageSize, firstTime, lastTime, status);

        this.applyForList = data.data.applyForPage.records;
        this.applyForInline.total = data.data.applyForPage.total;
        this.applyForInline.pageSize = data.data.applyForPage.size;
        this.applyForInline.current = data.data.applyForPage.current;
      },

      //格式时间为指定日期
      dateFormat(row, column) {
        let date = row[column.property];
        if (date == undefined) {
          return ''
        }
        ;
        return moment(date).format("YYYY-MM-DD")
      },

      //搜索按钮  模糊查询申请信息
      queryAllApplyForByCondition() {
        this.getApplyForList();
      },

      //改变radio的值做模糊查询
      statusChange(val) {
        this.getApplyForList();
      },

      //改变时间的值做模糊查询
      timeChange(val) {
        this.getApplyForList();
      },

      //"取消"
      delApplyFor(id) {
        alert("点击了取消按钮")
      },

      //"查看"
      selectById(id) {
        alert("点击了查看按钮")
      },

      /************************新建申请*****************************************/
      //切换到 “新建申请”  获取 下拉的需求方信息
      async getConsumer(tab, event) {
        if (tab.name == 1) {
          const {data} = await queryConsumerCount();
          this.consumerList = data.data.consumer;
        }
      },

      //“选择物品”  弹框显示   （当记录数发生改变时）
      handleSizeChange2(val) {
        this.product.pageSize = val;
        this.getProductList();
      },

      //“选择物品”  弹框显示   （当前页发生改变时）
      handleCurrentChange2(val) {
        this.product.current = val;
        this.getProductList();
      },

      //“选择物品”  弹框显示  （根据条件查询所有商品信息）
      async getProductList() {
        let current = this.product.current;
        let pageSize = this.product.pageSize;
        let name = this.product.name;

        const {data} = await queryAllProductByCondition(current, pageSize, name);

        this.productList = data.data.productPage.records;
        this.product.total = data.data.productPage.total;
        this.product.pageSize = data.data.productPage.size;
        this.product.current = data.data.productPage.current;

      },

      //点击 “选择产品”  （显示弹框  显示数据）
      selectProduct() {
        this.dialogVisible = true;
        this.getProductList();
      },

      //“选择物品”  弹框显示  文本框 （名称变换 实现模糊查询）
      nameChange() {
        this.getProductList();
      },

      //当table中的复选框改变时触发    （获取选取的物资信息）
      selectionLineChangeHandle(val) {
        this.dataonLineListSelections = val;
      },

      //“提交选中”
      getSelectProduct() {
        this.dialogVisible = false;
      },

      //"移除“
      movingProduct(pid) {

      },

      //点击 “提交申请”  （1.先添加 申请表 和 申请明细表 的数据  2.再跳到审核页面（新页面），进行当前订单的部分字段的修改）
      addApplyFor() {
        this.applyForForm.productList=this.dataonLineListSelections
        let applyFor = this.applyForForm;
        let url = 'http://localhost:8090/applyFor/insertApplyFor';
        //添加
        this.$http({
          method: 'post',
          url: url,
          data:applyFor,
        }).then((result) => {
          //刷新数据
          this.getApplyForList();

          //添加成功跳到审批页面  //this.$router.push('/approve')
          this.$router.push({
            path:'/approve',
            query:{applyForInfo:result.data.data.applyFor}
          })
        }).catch(function (error) {
          console.log(error);
        });
      },
    },

    // create创建完成后钩子函数
    created() {
      this.getApplyForList();
    },


  }
</script>

<style scoped>
  .el-radio {
    text-align: left;
    margin: 2px;
  }

  table {
    width: 100%;
  }

  table td {
    width: 400px;
  }

  table, table tr, table td {
    border: 1px solid #DDDDDD;
    border-collapse: collapse;
  }

  .el-col {
    border-bottom: 1px solid #DDDDDD;
  }
</style>
